<template>
	<view class="content">
		<view class="top">
			<view class="orderState">
				<image src="../../static/img/icon_order_def.png" mode="" style="width: 44rpx;height: 44rpx;"></image>
				<view class="SheetState" v-if="data.expressNo">已发货</view>
				<view class="SheetState" v-else>已接单</view>
			</view>
		
		</view>
		<!-- 订单信息 -->
		<view class="information">
			 <view class="detailedTitle">订单信息</view>
			 <view class="informationLine">
				 <view class="informationTxt">订单编号：</view>
				 <view class="informationNum">{{data.orderNo}}</view>
				 
			 </view>
			 <view class="informationLine">
				 <view class="informationTxt">姓名：</view>
				 <view class="informationNum">{{data.receivePersonName}}</view>	
			 </view>
			 <view class="informationLine">
				 <view class="informationTxt">手机号：</view>
				 <view class="informationNum">{{data.receivePhone}}</view>	
			 </view>
			 <view class="informationLine" v-if="data.expressNo">
				 <view class="informationTxt">快递信息：</view>
				 <view class="informationNum">{{data.expressCode}}-{{data.expressNo}}</view>	
				  <view class="copyBtn" @click="copy(data.expressNo)">复制</view>
			 </view>
			 <view class="informationLine">
				 <view class="informationTxt">下单时间：</view>
				 <view class="informationNum">{{data.orderTime}}</view>	
			 </view>
			 <view class="informationLine2">
				 <view class="informationTxt">下单地址：</view>
				 <view class="addressbox">
					 <view class="address">{{data.receiveProvince}}{{data.receiveCity}}{{data.receiveCounty}}{{data.receiveAddress}}</view>
					 <view class="copyBtn" v-if="!data.expressNo" @click="modify()">修改</view>
				 </view>	
			 </view>
			
		</view>
		<!-- 订单信息 -->
		
		<view class="information">
			 <view class="detailedTitle">商品信息</view>
			 <view class="informationLine">
					 <view class="informationTxt">商品名称：</view>
					 <view class="informationNum">{{data.card.cardTypeNameLabel}}{{data.card.cardTypeVersionLabel}}</view>	
			 </view>
			 <view class="informationLine" v-if="data.orderConf">
			 	<view class="informationTxt"> 配置信息：</view>
			 	<view class="informationNum">  {{JSON.parse(data.orderConf).label}}配置，{{JSON.parse(data.orderConf).value}}</view>
			 
			 </view>
			 <view class="informationLine">
				 <view class="informationTxt">商品数量：</view>
				 <view class="informationNum">{{data.orderNum}}</view>	
			 </view>
		</view>
		
		<view class="addressTk" v-if="addressShow" @click="addressHide">
			<view class="addressTkCont" @click.stop="">
				<view class="popupTitle">修改收货地址</view>
				<view class="popupLineBox">
					 <view class="kkline">
					   <view class="kklineLeft">
						<span>所在地区</span>
					   </view>
					   <view class="kklineRight" @click="open">
						  {{city}}
					   </view>
					 </view>
					 <view class="kkline2 " >
						<view class="kklineLeft">详细地址</view>
						<input type="text" v-model="receiveAddress" placeholder="请输入详细地址" class="beizInput" placeholder-style="color:#cccccc;">
					 </view> 
					 <view class="addressBtn" @click="addressBtn">提交修改</view>
							 
				</view>
			</view>
			
		</view>
		
		<!-- 历史订单 -->
		<view v-if="carhistoryList.length>1">
		   <view class="popupTitle">历史订单</view>
		   <view class="information" v-for="(item,index) in carhistoryList" v-if="item.orderId!=orderId">
		   	 <view class="detailedTitle">历史订单信息</view>
		   	 <view class="informationLine">
		   		 <view class="informationTxt">订单编号：</view>
		   		 <view class="informationNum">{{item.orderNo}}</view>
		   		 
		   	 </view>
		   	 <view class="informationLine">
				 <view class="informationTxt">下单时间：</view>
				 <view class="informationNum">{{item.orderTime}}</view>	
		   	 </view>
		   	 <view class="informationLine">
		   			 <view class="informationTxt">姓名：</view>
		   			 <view class="informationNum">{{item.receivePersonName}}</view>	
		   	 </view>
		   	 <view class="informationLine">
		   			 <view class="informationTxt">手机号：</view>
		   			 <view class="informationNum">{{item.receivePhone}}</view>	
		   	 </view>
		   	 <view class="informationLine">
					 <view class="informationTxt">商品名称：</view>
					 <view class="informationNum">{{item.card.cardTypeNameLabel}}{{item.card.cardTypeVersionLabel}}</view>	
		   	 </view>
		   	 <view class="informationLine">
		   	 				 <view class="informationTxt">商品数量：</view>
		   	 				 <view class="informationNum">{{item.orderNum}}</view>	
		   	 </view>
			 <view class="informationLine" v-if="item.orderConf">
			 	<view class="informationTxt"> 配置信息：</view>
			 	<view class="informationNum">  {{JSON.parse(item.orderConf).label}}配置，{{JSON.parse(item.orderConf).value}}</view>
			 
			 </view>
		   	 <view class="informationLine" v-if="item.expressNo">
		   			 <view class="informationTxt">快递信息：</view>
		   			 <view class="informationNum">{{item.expressCode}}-{{item.expressNo}}</view>	
		   			  <view class="copyBtn" @click="copy(item.expressNo)">复制</view>
		   	 </view>
		   	
		   	 <view class="informationLine2">
		   			 <view class="informationTxt">下单地址：</view>
		   			 <view class="addressbox">
		   				 <view class="address">{{item.receiveProvince}}{{item.receiveCity}}{{item.receiveCounty}}{{item.receiveAddress}}</view>
		   				 
		   			 </view>	
		   	 </view>
		   	 
		   </view>
		</view>
		
		
		 
	  
	  <cityPicker :column="column" :default-value="defaultValue" :mask-close-able="maskCloseAble" @confirm="confirm" @cancel="cancel" :visible="visible"/>
	</view>
</template>

<script>
import cityPicker from '@/uni_modules/piaoyi-cityPicker/components/piaoyi-cityPicker/piaoyi-cityPicker'
	export default {
		 components: {
		        cityPicker
		},
		data() {
			return {
				orderData:'',
				addressShow:false,
				city:'请选择',
				visible:false,
				orderId:'',
				data:'',
				receiveProvince:'',
				receiveCity:'',
				receiveCounty:'',
				receiveAddress:'',
				cardNo:'',
				carhistoryList:'',
			}
		},
		onLoad(opt) {
           this.orderId=opt.orderId;
		   this.getData()
		},
		methods: {
           modify(){
			   this.addressShow=true
		   },
		   copy(expressNo){
			   uni.setClipboardData({
			       data: expressNo,
			       success: function () {
			        
			         // 可以添加用户友好的提示，例如使用uni.showToast提示复制成功
			         uni.showToast({
			           title: '复制成功',
			           icon: 'success',
			           duration: 2000
			         });
			       },
			       fail: function () {
			         console.log('复制失败');
			         // 可以添加错误处理或用户友好的提示
			       }
			     });
		   },
		   open () {
		   		this.visible = true
		   },
		   confirm (val) {
			  console.log(val)
			 // this.str = JSON.stringify(val)
			  this.city=val.name
			  this.receiveProvince=val.provinceName;
			  this.receiveCity=val.cityName;
			  this.receiveCounty=val.areaName;
			  this.visible = false
		   },
		   addressHide(){
			   this.addressShow=false
		   },
	       getData(){
	          this.$http('delivery/cardOrders/'+this.orderId,{
	       	
	          },'GET').then(res => {
	       	   //console.log(res)
	       	   
	       		if(!res.data){
	       			uni.showToast({
	       				 title: res.msg,
	       				 icon:'none',
	       				 duration: 3000
	       			});
	       		}else{
	       			this.data=res.data
					this.cardNo=res.data.card.cardNo;
					this.getList()
	       		}
	          })
	       },
		   addressBtn(){
			   if(!this.city){
				  uni.showToast({
					 title: '请输入选择城市',
					 icon:'none',
					 duration: 3000
				  });
				  return false
			   }
			   if(!this.receiveAddress){
				   uni.showToast({
					 title: '请输入详细地址',
					 icon:'none',
					 duration: 3000
				   });
				   return false
			   }
			   this.$http('delivery/cardOrders',{
			        orderId:this.orderId,
					receiveProvince:this.receiveProvince,
					receiveCity:this.receiveCity,
					receiveCounty:this.receiveCounty,
					receiveAddress:this.receiveAddress,
			   				
			   },'PUT').then(res => {
			   	   //console.log(res)
			   			uni.showToast({
			   				 title: res.msg,
			   				 icon:'none',
			   				 duration: 3000
			   			});
						this.getData()
						this.addressShow=false
			   		
			    })
		   },
		   getList(){
			  
			   this.$http('delivery/cardOrders/list',{
			   	cardNo:this.cardNo,
			   	pageSize:99
			   },'GET').then(res => {
			   	   
			   	    this.carhistoryList=res.rows
			   		
			    })
		   }
		
		}
	}
</script>

<style scoped>
	.top {
		height: 190rpx;
		background-color: #D53533;
	
	}
	.orderState {
		display: flex;
		justify-content: center;
		align-items: center;
		padding-top: 40rpx;
	}
	.SheetState {
		display: flex;
		justify-content: center;
		font-size: 36rpx;
		font-weight: 500;
		color: #FFFFFF;
		margin-left: 15rpx;
	
	}
	.information{
		width: 702rpx;
		background: #FFFFFF;
		border-radius: 10px;
		margin-left: 24rpx;
		margin-top: 20rpx;
		padding: 0rpx 0 15rpx 0;
	}
	.informationLine{
		display: flex;font-size: 26rpx;
		padding: 15rpx 20rpx;
	}
	.informationLine2{
		font-size: 26rpx;
		padding: 15rpx 20rpx;
	}
	.informationTxt{
		width: 130rpx;
		color: #666666;
	}
	.informationNum{
		color: #333333;
		width: 500rpx;
	}
	.copyBtn{
		width: 86rpx;
		height: 40rpx;
		background: #F4F5F7;
		border-radius: 20rpx;
		font-size: 24rpx;
		color: #333333;
		text-align: center;
		line-height: 40rpx;
		margin-left: 20rpx;
	}
	.detailedTitle{
		font-size: 32rpx;
		color: #3C3C3C;
		padding-left: 20rpx;padding-top: 30rpx;
		font-weight: 600;
		padding-bottom: 10rpx;
	}
	.addressbox{
		display: flex;
		justify-content: space-between;
		padding: 15rpx 0rpx;
	}
	.address{
		width: 500rpx;
	}
	.popupLineBox{
			 padding-bottom: env(safe-area-inset-bottom);
			 padding: 20rpx;
		}
		.popupTitle{
			line-height: 100rpx;
			text-align: center;
			font-size: 30rpx;
			color: #999999;
		}
	.addressTkCont{
		background: #FFFFFF;
		width: 100%;
		height: 600rpx;
		position: absolute;
		left: 0;
		bottom: 0;
		 padding-bottom: env(safe-area-inset-bottom);
	}
	.addressTk{
		position: fixed;
		width: 100vw;
		height: 100vh;
		background: rgba(0, 0, 0, 0.5);
		top: 0;
		left: 0;
	}
	.kkline{
		display: flex;
		padding: 30rpx 0;
		border-bottom: 1px solid #EEEEEE;
		color: #666666;
		font-size: 28rpx;
		justify-content: space-between;
	}
	.kkline2{
		padding: 30rpx 0;
		border-bottom: 1px solid #EEEEEE;
		color: #666666;
		font-size: 28rpx;
	}
	.kklineLeft {
		width: 200rpx;
	}
	.kklineRight{
		color: #3c3c3c;
		font-size: 28rpx;
		
		width: 450rpx;
	/* 	text-align: right; */
	}
	.beizInput{
		width: 600rpx;font-size: 28rpx;
		margin-top: 20rpx;
	}
	.addressBtn{
		height: 90rpx;
		text-align: center;
		line-height: 90rpx;
		font-size: 30rpx;
		background: #D53533;
		color: #fff;
		margin-top: 50rpx;
		border-radius: 10rpx;
	}
</style>
